/*
 * @Description:  图片和视频组件
 * @Author: tao.xie
 * @Date: 2019-04-01 21:58:18
 * @Last Modified by: tao.xie
 * @Last Modified time: 2019-04-02 00:24:00
 */
<template>
  <page-base :height="height">
    <swiper
      :options="swiperOption"
      style="width:100%;height:100%"
    >
      <swiper-slide
        v-for="(ad,index) in adlist"
        v-bind:key="index"
      >
        <img
          :src="ad.AD_RESOURCES[0].URL"
          v-if="ad.AD_RESOURCES[0].RESOURCE_FORM_TYPE===0"
        />
        <video
          controls="controls"
          :src="ad.AD_RESOURCES[0].URL"
          v-else
        />
      </swiper-slide>
      <div
        class="swiper-button-prev"
        slot="button-prev"
      ></div>
      <div
        class="swiper-button-next"
        slot="button-next"
      ></div>
    </swiper>
  </page-base>
</template>

<script>
import Base from './Base'
// require styles
import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  components: {
    'page-base': Base,
    swiper,
    swiperSlide

  },
  props: {
    height:
      {
        type: String,
        default: '',
        required: true
      },
    adlist: {
      type: Array,
      default: () => {
        return []
      },
      required: true
    }
  },
  data() {
    return {
      swiperOption: {
        loop: true,
        paginationClickable: true,
        prevButton: '.swiper-button-prev',
        nextButton: '.swiper-button-next'
      }
    }
  },
  methods: {
  }
}
</script>

<style scoped>
swiper-slide {
  width: 100%;
  height: 100%;
}
img,
video {
  width: 100%;
  height: 100%;
}
</style>
